<%--
  Created by IntelliJ IDEA.
  User: cyh
  Date: 2025/10/21
  Time: 19:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>简易计算器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
      background-color: #fff;
    }

    .calculator {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 20px;
      background-color: #f9f9f9;
    }

    .display {
      width: 220px;
      height: 30px;
      font-size: 20px;
      text-align: right;
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #aaa;
    }

    .buttons button {
      width: 50px;
      height: 50px;
      font-size: 20px;
      margin: 5px;
      border: 1px solid #aaa;
      background-color: #fff;
      cursor: pointer;
    }

    .buttons .equals {
      width: 110px; /* 两个格子宽 */
    }
  </style>
</head>
<body>
  <h3>简易计算器</h3>
  <div class="calculator">
    <input type="text" id="display" class="display" disabled>
    <div class="buttons">
      <button onclick="appendValue('7')">7</button>
      <button onclick="appendValue('8')">8</button>
      <button onclick="appendValue('9')">9</button>
      <button onclick="appendValue('+')">+</button><br>

      <button onclick="appendValue('4')">4</button>
      <button onclick="appendValue('5')">5</button>
      <button onclick="appendValue('6')">6</button>
      <button onclick="appendValue('-')">-</button><br>

      <button onclick="appendValue('1')">1</button>
      <button onclick="appendValue('2')">2</button>
      <button onclick="appendValue('3')">3</button>
      <button onclick="appendValue('*')">*</button><br>

      <button onclick="appendValue('0')">0</button>
      <button class="equals" onclick="calculate()">=</button>
      <button onclick="appendValue('/')">/</button>
    </div>
  </div>

  <script>
    function appendValue(val) {
      document.getElementById('display').value += val;
    }

    function calculate() {
      try {
        document.getElementById('display').value = eval(document.getElementById('display').value);
      } catch (e) {
        alert('表达式错误');
      }
    }
  </script>

</body>
</html>